<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>背景颜色(backgroud-color) |  zfy的个人博客</title>
    <meta name="generator" content="VuePress 1.9.7">
    <link rel="icon" href="./img/Scorpio.png">
    <link rel="stylesheet" href="./css/style.css">
    <meta name="description" content="My tech blog">
    
    <link rel="preload" href="./assets/css/0.styles.cfdaa54c.css" as="style"><link rel="preload" href="./assets/js/app.7878252f.js" as="script"><link rel="preload" href="./assets/js/2.877879cc.js" as="script"><link rel="preload" href="./assets/js/22.4a1d71dd.js" as="script"><link rel="prefetch" href="./assets/js/10.a489e96f.js"><link rel="prefetch" href="./assets/js/11.f6f26a2f.js"><link rel="prefetch" href="./assets/js/12.8a827e29.js"><link rel="prefetch" href="./assets/js/13.e420b04a.js"><link rel="prefetch" href="./assets/js/14.52f00cc6.js"><link rel="prefetch" href="./assets/js/15.ef68d553.js"><link rel="prefetch" href="./assets/js/16.c2999dfd.js"><link rel="prefetch" href="./assets/js/17.0adb748c.js"><link rel="prefetch" href="./assets/js/18.2c077020.js"><link rel="prefetch" href="./assets/js/19.013b5e02.js"><link rel="prefetch" href="./assets/js/20.bb3b854e.js"><link rel="prefetch" href="./assets/js/21.28efc78c.js"><link rel="prefetch" href="./assets/js/23.605a5451.js"><link rel="prefetch" href="./assets/js/24.66bf035d.js"><link rel="prefetch" href="./assets/js/25.fbe72655.js"><link rel="prefetch" href="./assets/js/26.3f374d1f.js"><link rel="prefetch" href="./assets/js/27.556ea617.js"><link rel="prefetch" href="./assets/js/28.0cab868b.js"><link rel="prefetch" href="./assets/js/29.564f8747.js"><link rel="prefetch" href="./assets/js/3.4cfb1b9c.js"><link rel="prefetch" href="./assets/js/30.c4a099d1.js"><link rel="prefetch" href="./assets/js/31.7fbc3d2a.js"><link rel="prefetch" href="./assets/js/32.8f356b20.js"><link rel="prefetch" href="./assets/js/33.b5a1b0bb.js"><link rel="prefetch" href="./assets/js/34.57086c2e.js"><link rel="prefetch" href="./assets/js/35.2b4d0231.js"><link rel="prefetch" href="./assets/js/36.a99f6d64.js"><link rel="prefetch" href="./assets/js/37.eb25dcef.js"><link rel="prefetch" href="./assets/js/38.e45d8594.js"><link rel="prefetch" href="./assets/js/39.213e3a72.js"><link rel="prefetch" href="./assets/js/4.b86a0fbe.js"><link rel="prefetch" href="./assets/js/40.cadafdd6.js"><link rel="prefetch" href="./assets/js/41.23b0f26d.js"><link rel="prefetch" href="./assets/js/42.7c2b83c6.js"><link rel="prefetch" href="./assets/js/43.62f328ea.js"><link rel="prefetch" href="./assets/js/44.c4dfbd34.js"><link rel="prefetch" href="./assets/js/45.cde5bb22.js"><link rel="prefetch" href="./assets/js/46.6c62bdb8.js"><link rel="prefetch" href="./assets/js/47.4857766a.js"><link rel="prefetch" href="./assets/js/48.55a0cccc.js"><link rel="prefetch" href="./assets/js/49.3dceda91.js"><link rel="prefetch" href="./assets/js/5.13776f82.js"><link rel="prefetch" href="./assets/js/50.ab4d52fa.js"><link rel="prefetch" href="./assets/js/51.69ccc35a.js"><link rel="prefetch" href="./assets/js/52.01f3f711.js"><link rel="prefetch" href="./assets/js/53.c146a1ff.js"><link rel="prefetch" href="./assets/js/54.71ce70c2.js"><link rel="prefetch" href="./assets/js/55.98ef481d.js"><link rel="prefetch" href="./assets/js/56.b23daa51.js"><link rel="prefetch" href="./assets/js/57.6aa314ad.js"><link rel="prefetch" href="./assets/js/58.7d6367d9.js"><link rel="prefetch" href="./assets/js/59.88894cf5.js"><link rel="prefetch" href="./assets/js/6.93d89692.js"><link rel="prefetch" href="./assets/js/60.111f9a04.js"><link rel="prefetch" href="./assets/js/61.add82aab.js"><link rel="prefetch" href="./assets/js/62.8bfac830.js"><link rel="prefetch" href="./assets/js/63.db44a5ca.js"><link rel="prefetch" href="./assets/js/64.0244f0ef.js"><link rel="prefetch" href="./assets/js/65.2be994de.js"><link rel="prefetch" href="./assets/js/66.c5066e37.js"><link rel="prefetch" href="./assets/js/67.c11b474b.js"><link rel="prefetch" href="./assets/js/68.276bdc3e.js"><link rel="prefetch" href="./assets/js/69.f5f39d50.js"><link rel="prefetch" href="./assets/js/7.ca9f7e96.js"><link rel="prefetch" href="./assets/js/70.e3ca02b0.js"><link rel="prefetch" href="./assets/js/71.befcf8f7.js"><link rel="prefetch" href="./assets/js/72.04fabafd.js"><link rel="prefetch" href="./assets/js/73.e5b707f2.js"><link rel="prefetch" href="./assets/js/74.b5668150.js"><link rel="prefetch" href="./assets/js/75.eb7cfac9.js"><link rel="prefetch" href="./assets/js/76.c1b76370.js"><link rel="prefetch" href="./assets/js/77.5875e953.js"><link rel="prefetch" href="./assets/js/78.a5e2fa5b.js"><link rel="prefetch" href="./assets/js/79.eb2d51a7.js"><link rel="prefetch" href="./assets/js/8.570c39ea.js"><link rel="prefetch" href="./assets/js/80.7252ac50.js"><link rel="prefetch" href="./assets/js/81.eb980d26.js"><link rel="prefetch" href="./assets/js/82.9e069d8f.js"><link rel="prefetch" href="./assets/js/83.8c5a6dc6.js"><link rel="prefetch" href="./assets/js/84.26baaa09.js"><link rel="prefetch" href="./assets/js/85.96bc7e77.js"><link rel="prefetch" href="./assets/js/86.9c9dd1ca.js"><link rel="prefetch" href="./assets/js/87.d54639b8.js"><link rel="prefetch" href="./assets/js/88.3d3ae1e1.js"><link rel="prefetch" href="./assets/js/89.a81caa83.js"><link rel="prefetch" href="./assets/js/9.7a58df3d.js"><link rel="prefetch" href="./assets/js/90.c3c347ed.js"><link rel="prefetch" href="./assets/js/91.b6240032.js"><link rel="prefetch" href="./assets/js/92.8331718a.js"><link rel="prefetch" href="./assets/js/93.ca174cfa.js"><link rel="prefetch" href="./assets/js/94.fec3300c.js"><link rel="prefetch" href="./assets/js/95.076b06fb.js"><link rel="prefetch" href="./assets/js/96.8ed8b32f.js">
    <link rel="stylesheet" href="./assets/css/0.styles.cfdaa54c.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/./" class="home-link router-link-active"><!----> <span class="site-name"> zfy的个人博客</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="http://127.0.0.1:3002/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  自由博客板块
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="http://zfyangelo.gitee.io/yu-weather-web-show/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  天气预报
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="/./guide/" class="nav-link router-link-active">
  个人的学习笔记
</a></div><div class="nav-item"><a href="/./baodian/interview/" class="nav-link">
  项目及在校经历
</a></div><div class="nav-item"><a href="/./baodian/talk/" class="nav-link">
  爱好和联系方式
</a></div><div class="nav-item"><a href="https://gitee.com/zfyangelo" target="_blank" rel="noopener noreferrer" class="nav-link external">
  我的gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="http://127.0.0.1:3002/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  自由博客板块
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="http://zfyangelo.gitee.io/yu-weather-web-show/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  天气预报
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="/./guide/" class="nav-link router-link-active">
  个人的学习笔记
</a></div><div class="nav-item"><a href="/./baodian/interview/" class="nav-link">
  项目及在校经历
</a></div><div class="nav-item"><a href="/./baodian/talk/" class="nav-link">
  爱好和联系方式
</a></div><div class="nav-item"><a href="https://gitee.com/zfyangelo" target="_blank" rel="noopener noreferrer" class="nav-link external">
  我的gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>HTML</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>CSS</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/./guide/notes/css/03-CSS基本样式和选择器.html" class="sidebar-link">01-CSS基本样式和选择器</a></li><li><a href="/./guide/notes/css/04-盒模型.html" class="sidebar-link">02-CSS盒模型</a></li><li><a href="/./guide/notes/css/05-行内盒模型.html" class="sidebar-link">03-行内盒模型</a></li><li><a href="/./guide/notes/css/06-显示样式.html" class="sidebar-link">04-显示样式</a></li><li><a href="/./guide/notes/css/07-背景样式.html" class="active sidebar-link">05-背景样式</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/./guide/notes/css/07-背景样式.html#背景颜色-backgroud-color" class="sidebar-link">背景颜色(backgroud-color)</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/css/07-背景样式.html#opacity透明度" class="sidebar-link">opacity透明度</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/css/07-背景样式.html#元素显示状态-visibility" class="sidebar-link">元素显示状态(visibility)</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/css/07-背景样式.html#背景图片-background-image-格式" class="sidebar-link">背景图片(background-image)格式</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/css/07-背景样式.html#背景平铺-background-repeat" class="sidebar-link">背景平铺(background-repeat)</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/css/07-背景样式.html#背景大小-background-size" class="sidebar-link">背景大小(background-size)</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/css/07-背景样式.html#背景位置-backgroun-position" class="sidebar-link">背景位置(backgroun-position)</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/css/07-背景样式.html#背景原点-background-origin" class="sidebar-link">背景原点(background-origin）</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/css/07-背景样式.html#背景裁切-background-clip" class="sidebar-link">背景裁切（background-clip)</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/css/07-背景样式.html#溢出-overflow" class="sidebar-link">溢出（overflow）</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/css/07-背景样式.html#背景附着-background-attachment" class="sidebar-link">背景附着(background-attachment)</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/css/07-背景样式.html#background简写属性" class="sidebar-link">background简写属性</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/css/07-背景样式.html#多重背景" class="sidebar-link">多重背景</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/css/07-背景样式.html#雪碧图-css-sprite" class="sidebar-link">雪碧图（CSS-sprite）</a></li></ul></li><li><a href="/./guide/notes/css/08-圆角渐变.html" class="sidebar-link">06-圆角渐变</a></li><li><a href="/./guide/notes/css/09-浮动.html" class="sidebar-link">07-浮动</a></li><li><a href="/./guide/notes/css/10-定位.html" class="sidebar-link">08-定位</a></li><li><a href="/./guide/notes/css/css样式书写顺序和命名规范.html" class="sidebar-link">09-css样式书写顺序和命名规范</a></li><li><a href="/./guide/notes/css/13-高级选择器和伪元素.html" class="sidebar-link">11-高级选择器和伪元素</a></li><li><a href="/./guide/notes/css/14-动画样式.html" class="sidebar-link">12-动画样式</a></li><li><a href="/./guide/notes/css/15-transform.html" class="sidebar-link">13-transform</a></li><li><a href="/./guide/notes/css/16-3d和盒阴影和遮罩.html" class="sidebar-link">14-3D盒阴影和遮罩</a></li><li><a href="/./guide/notes/css/17-弹性盒模型.html" class="sidebar-link">15-弹性盒模型</a></li><li><a href="/./guide/notes/css/18-阿里图标 组件化 swiper.html" class="sidebar-link">16-阿里图标 组件化 swiper</a></li><li><a href="/./guide/notes/css/19-响应式.html" class="sidebar-link">17-响应式</a></li><li><a href="/./guide/notes/css/less.html" class="sidebar-link">less</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Javascipt</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>HTML&amp;CSS练习</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Javascipt练习</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h2 id="背景颜色-backgroud-color"><a href="#背景颜色-backgroud-color" class="header-anchor">#</a> 背景颜色(backgroud-color)</h2> <h3 id="颜色表示方法"><a href="#颜色表示方法" class="header-anchor">#</a> 颜色表示方法</h3> <h4 id="关键字表示法"><a href="#关键字表示法" class="header-anchor">#</a> 关键字表示法</h4> <blockquote><p>白 　　　　 white</p> <p>黄 　　　　 yellow</p> <p>红 　　　　 red</p> <p>紫红 　　　 fuchsia</p> <p>水绿 　　　 aqua</p> <p>浅绿 　　　 lime</p> <p>蓝 　　　　 blue</p> <p>黑 　　　　 black</p> <p>灰 　　　　 gray</p> <p>绿 　　　　 green</p> <p>褐 　　　　 maroon</p> <p>深蓝 　　　 navy</p> <p>橄榄 　　　 olive</p> <p>紫 　　　　 purple</p> <p>深青 　　　 teal</p> <p>银 　　　　 sliver 　　//开发不常用</p></blockquote> <h4 id="rgb函数表示法"><a href="#rgb函数表示法" class="header-anchor">#</a> RGB函数表示法</h4> <blockquote><p>RGB接受三个数值,每个数值分别代表红绿蓝的比例</p> <p>r red , g green , b blue</p> <p>每一种颜色的范围在0-255 ( 0% - 100%)之间</p> <p>语法： rgb(红色 ， 绿色， 蓝色)</p> <p>255,255,0-纯黄   0,255,255  青色 255,0,255紫红色</p></blockquote> <h4 id="rgba-函数表示法-rgb的加强版"><a href="#rgba-函数表示法-rgb的加强版" class="header-anchor">#</a> rgba()函数表示法----rgb的加强版</h4> <blockquote><p>就是在rgb的基础上增加了一个a</p> <p>a表示alpha是用于控制透明度的阿尔法通道，</p> <p>其中1表示完全不透明，0表示完全透明。</p> <p>也可以写百分比的参数.100%完全不透明,0%完全透明.</p></blockquote> <h4 id="十六进制法"><a href="#十六进制法" class="header-anchor">#</a> 十六进制法</h4> <blockquote><p>就是一个#后面加上6位十六进制的数字构成.(十六进制相对于十进制最大的区别就是逢十六进一.)</p> <p>语法:#红色（2位）绿色（2位）蓝色（2位）</p> <p>每个数字有<strong>十六种不同的可能</strong>,</p> <p>分别是0~9与 a~f , 0表示颜色没有, f表示颜色最浓.</p> <p>每两位颜色也对应RGB中的红绿蓝颜色.</p> <p>例如#ff0000对应rgb中的(255,0,0).</p> <p>2位十六进制代表的也是256种的可能情况,</p> <p>就是16*16=256;跟RGB一个数字所代表的的可能性是一致的.</p> <p>RGB一个数值就相当代表十六进制两个数字.</p> <p>如果颜色两位两位的重复可以进行简写   #aabbcc --&gt; #abc</p></blockquote> <blockquote><p>这两者都是可以互相转化的,有专门的的16进制转RGB的工具.</p></blockquote> <h4 id="hsl-函数表示法"><a href="#hsl-函数表示法" class="header-anchor">#</a> hsl()函数表示法</h4> <blockquote><p>H 色相  （0deg  - 360deg）</p> <p>S 饱和度  颜色的浓度 （0 -100%）</p> <p>L 亮度  颜色的亮度（0 - 100%）</p> <p>角度的话红色在0deg 绿色在顺时针方向三分之一圆（120度),而蓝色在三分之2圆（240度)</p></blockquote> <h4 id="hsla-函数表达式"><a href="#hsla-函数表达式" class="header-anchor">#</a> hsla()函数表达式</h4> <blockquote><p>它的关系跟rgb()和rgba()关系一样，都可以接受一个透明的参数</p></blockquote> <p>**PS:**使用那种颜色表示法没有本质区别,他们只是同一事物不同的方法而已.</p> <h2 id="opacity透明度"><a href="#opacity透明度" class="header-anchor">#</a> opacity透明度</h2> <blockquote><p>知道了如何控制颜色的透明度,css其实还有另一种方式来控制透明度.就是opacity.</p> <p>取值 0-1    0表示完全透明  1表示完全不透明</p> <p>内部所有内容都会变得透明</p></blockquote> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.box</span><span class="token punctuation">{</span>
     <span class="token property">width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
	 <span class="token property">height</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
     <span class="token property">background-color</span><span class="token punctuation">:</span>blue<span class="token punctuation">;</span>   
     <span class="token property">opcity</span><span class="token punctuation">:</span>0.5<span class="token punctuation">;</span> 
<span class="token punctuation">}</span>
  <span class="token selector">.smallbox</span><span class="token punctuation">{</span>
	<span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
	<span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
	<span class="token property">background-color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
 &lt;div class=<span class="token string">&quot;box&quot;</span>&gt;
       &lt;div class=<span class="token string">&quot;smallbox&quot;</span>&gt;&lt;/div&gt;
  &lt;/div&gt;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h2 id="元素显示状态-visibility"><a href="#元素显示状态-visibility" class="header-anchor">#</a> 元素显示状态(visibility)</h2> <p>visibility: visible  子元素显示</p> <p>visibility:hidden; 不显示隐藏,渲染占据空间</p> <p>display:none;   visibility:hidden;   opacity:0;之间的区别</p> <p><strong>一、空间占据</strong></p> <blockquote><p>display:none隐藏后不占据额外空间，它会产生重排（回流）和重绘。 重新排列</p> <p>visibility:hidden和opacity:0元素虽然隐藏了，但它们仍然占据着空间，它们俩只会引起页面重绘。</p></blockquote> <p><strong>二、子元素继承</strong></p> <blockquote><p>display:none不会被子元素继承，但是父元素都不在了，子元素自然也就不会显示了</p> <p>visibility:hidden 会被子元素继承，可以通过设置子元素visibility:visible 使子元素显示出来</p> <p>opacity: 0 也会被子元素继承，但是不能通过设置子元素opacity: 1使其重新显示</p></blockquote> <p><strong>三、事件绑定</strong></p> <blockquote><p>display:none 的元素都已经不再页面存在了，因此肯定也无法触发它上面绑定的事件；</p> <p>visibility:hidden  元素上绑定的事件也无法触发；</p> <p>opacity: 0 元素上面绑定的事件是可以触发的。</p></blockquote> <p><strong>四、过渡动画</strong></p> <blockquote><p>transition对于display肯定是无效的，大家应该都知道；</p> <p>transition对于visibility也是无效的；</p> <p>transition对于opacity是有效，大家也是知道的:).</p></blockquote> <hr> <h2 id="背景图片-background-image-格式"><a href="#背景图片-background-image-格式" class="header-anchor">#</a> 背景图片(background-image)格式</h2> <p>background-image:url(&quot;路径&quot;)；插入图片</p> <p><strong>什么时候插入内容图片，什么时候插入背景图片。</strong></p> <blockquote><p>简而言之如果图片从网页中去掉，网页本身仍然有意义，没有什么影响，该图片可以作为背景图片。这个主要是<strong>页面和盒子的装裱</strong></p> <p>但是如果图片从网页中去掉这个图片，网页的观感完全变了样，说明图片是具有意义，那么该图片当作内容图片例如<strong>淘宝</strong>上的<strong>商品</strong>之类的.会常常更换的.</p></blockquote> <hr> <h2 id="背景平铺-background-repeat"><a href="#背景平铺-background-repeat" class="header-anchor">#</a> 背景平铺(background-repeat)</h2> <blockquote><p>如果背景图片小于元素大小,则背景图片会自动在元素中平铺将元素铺满</p> <p>如果背景的图片大于元素,将会一个部分背景无法完全显示</p> <p>如果背景图片和元素一样大,则会直接正常显示</p> <p><strong>background-repeat</strong></p> <p>​					可选值</p> <p>​							repeat 默认值  背景会沿着x轴 y轴 方向重复</p> <p>​							repeat-x  沿着x轴方向重复</p> <p>​							repet-y  沿着y轴方向重复</p> <p>​							no-repeat 背景图片不重复</p> <p><strong>游览器的坐标系(唯一)</strong></p> <blockquote><p>水平向右x+</p> <p>垂直向下y+</p> <p>游览器左上为坐标原点</p></blockquote></blockquote> <hr> <h2 id="背景大小-background-size"><a href="#背景大小-background-size" class="header-anchor">#</a> 背景大小(background-size)</h2> <blockquote><p>我们的图片选择不可能都是正好符合我们盒子的大小</p> <p>如果我们使用了一张大图覆盖了整个元素盒子.这样的话在小屏幕上图片会进行裁切.</p> <p>反之如果屏幕特别大,元素边缘就会出现空白,</p> <p>要避免这种情况.让背景图片大小变的理想就使用background-size.</p> <p>​	<strong>background-size:设置图片的大小</strong></p> <p>​							 第一个值表示宽度</p> <p>​							 第二个值表示高度</p> <p>​			如果只写一个，则第二个默认是auto</p></blockquote> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.box</span><span class="token punctuation">{</span>
		<span class="token property">width</span><span class="token punctuation">:</span> 700px<span class="token punctuation">;</span>
		<span class="token property">height</span><span class="token punctuation">:</span> 700px<span class="token punctuation">;</span>
		<span class="token property">border</span><span class="token punctuation">:</span>3px solid skyblue<span class="token punctuation">;</span>
		<span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>1.jpg<span class="token punctuation">)</span></span><span class="token punctuation">;</span>
  		<span class="token property">background-repeat</span><span class="token punctuation">:</span> no-repeat<span class="token punctuation">;</span>
 		<span class="token property">background</span><span class="token punctuation">:</span><span class="token property">size</span><span class="token punctuation">:</span>100px 200px<span class="token punctuation">;</span>
  <span class="token comment">/*第一个值表示水平X轴的背景图片大小,Y表示Y轴背景图片大小*/</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.box</span><span class="token punctuation">{</span> <span class="token property">background-size</span><span class="token punctuation">:</span>100% 100%<span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token comment">/*想让元素随着元素缩放而缩放,就必须使用百分比值. 
 注意:百分比不是相对于图片固有大小,而是相对于容器大小.
 但是如果简单的把图片的宽度和高度都设置为百分比值,可能会因为容器高度变化而 导致图形变形.*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.box</span><span class="token punctuation">{</span> <span class="token property">background-size</span><span class="token punctuation">:</span>100% auto<span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token comment">/*这里我们让图片宽度(即X值)始终保持为100%,高度等比例放缩.保持了自己规定的宽高比.
  auto自动计算,等比例放大和缩小,都写auto就是原始尺寸*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>只写一个值的话.</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.box</span><span class="token punctuation">{</span> <span class="token property">background-size</span><span class="token punctuation">:</span>100%<span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token comment">/*第二个值默认是auto*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><blockquote><p>但是我们很多时候很有可能不知道图片的宽高比例,很有可能出现留白的情况.</p> <p>但是单纯用百分比图片又容易变形.</p> <p>这时候我们还可以去使用一种方法,我们可以去使用关键字</p></blockquote> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token property">background-size</span><span class="token punctuation">:</span>cover<span class="token punctuation">;</span>
<span class="token comment">/*背景图片会覆盖掉盒子所有空间(不留白),可能会进行裁切*/</span>

<span class="token property">background-size</span><span class="token punctuation">:</span>contain<span class="token punctuation">;</span>
<span class="token comment">/*等比例放大和缩小,一条边触碰到边框就停止,图片全部展示不会超出盒子*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><blockquote><p><strong>contain</strong></p> <p>​			图片比例不变，保持图片的完整显示</p> <p><strong>cover</strong></p> <p>​		保证图片覆盖元素的每一个像素,同时不会变形.</p> <p>​		但如果在一个高而窄的元素,元素高度会被填满,图片左右两边会被裁切</p> <p>​		而在一个较宽的元素之中,元素宽度会被填满,但图片的上下两边会被裁切.</p></blockquote> <hr> <h2 id="背景位置-backgroun-position"><a href="#背景位置-backgroun-position" class="header-anchor">#</a> 背景位置(backgroun-position)</h2> <p><strong>通过使用关键字来调整图片位置.</strong></p> <blockquote><p>在X轴上用left.center,right方位</p> <p>在Y轴上用top,center,bottom方位</p> <p>顺序一般是<strong>先X轴再Y轴,</strong></p> <p>使用方位词必须要同时指定两个值，如果只写一个值第二个值默认center</p></blockquote> <p><strong>通过偏移量来制定背景图片的位置</strong></p> <blockquote><p>backgroun-position：x y； 水平方向偏移量 垂直方向偏移量</p> <p>单位</p> <p>​		 1.像素px单位</p> <p>​		2.百分比单位调整</p></blockquote> <blockquote><p>百分比值不像绝对数值那样定位背景图片的左上角。</p> <p>而是定位图片中对应的点.</p></blockquote> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token property">background-position</span><span class="token punctuation">:</span>100% 0%<span class="token punctuation">;</span>
<span class="token comment">/*没有移出盒子,元素的宽度-图片的宽度=100%.*/</span>


盒子的宽度-图片的宽度=100%
500  -  400 = 100px =  100%对应的值<span class="token punctuation">;</span>

<span class="token comment">/*如何让图片在盒子中水平垂直居中*/</span>
<span class="token property">background-position</span><span class="token punctuation">:</span>50% 50%<span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>这上面都可以混合去进行使用</p> <p>百分比和具体偏移量</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token property">background-position</span><span class="token punctuation">:</span>50% 20px<span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>还可以写这样.</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token property">background-position</span><span class="token punctuation">:</span>right 20px bottom<span class="token punctuation">;</span>
<span class="token comment">/*表示图片靠最右边去显示,但是距离右边有20px*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>也可以去写关键字和百分比</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token property">background-position</span><span class="token punctuation">:</span>right 20% bottom<span class="token punctuation">;</span>
<span class="token comment">/*表示图片靠最右边去显示,但是距离右边有20%*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><hr> <h2 id="背景原点-background-origin"><a href="#背景原点-background-origin" class="header-anchor">#</a> 背景原点(background-origin）</h2> <blockquote><p>规定了在图片不平铺的情况下，背景图片的左上角顶点的初始位置</p> <p>background-origin 背景图片的基点</p> <p>​				可选值：</p> <p>​								 padding-box  默认值  背景图片从内边距左上角开始</p> <p>​								 content-box   背景图片相对于内容区左上角开始</p> <p>​								 border-box   背景图片相对于边框左上角开始</p></blockquote> <hr> <h2 id="背景裁切-background-clip"><a href="#背景裁切-background-clip" class="header-anchor">#</a> 背景裁切（background-clip)</h2> <blockquote><p>​              background-clip设置背景的出现的范围</p> <p>​					可选值：</p> <p>​								border-box默认值 背景会出现边框的下边</p> <p>​								 padding-box  背景不会出现在边框，只会出现在内容														区和内边距</p> <p>​								 content-box背景只会出现在内容区</p></blockquote> <h2 id="溢出-overflow"><a href="#溢出-overflow" class="header-anchor">#</a> 溢出（overflow）</h2> <blockquote><p>如果子元素大小超过了父元素，则子元素会从父元素溢出，使用overflw属性来设置父元素如何处理溢出的子元素</p> <p>​			<strong>可选值</strong></p> <p>​						visible 默认值 子元素会从父元素中溢出  在父元素外部的   位置显示</p> <p>​                       hidden 溢出内容将会被裁剪不显示</p> <p>​						scroll  生成两个滚动条来查看完整的内容</p> <p>​						  auto   根据需要生成滚动条</p></blockquote> <h2 id="背景附着-background-attachment"><a href="#背景附着-background-attachment" class="header-anchor">#</a> 背景附着(background-attachment)</h2> <blockquote><p>background-attachment决定背景是在视口中固定的还是随包含它的区块滚动的</p> <p>​		可选值：</p> <p>​				 scroll 默认值背景图片相对于元素本身固定.背景本身不移动,								 里面的内容如文字会移动.</p> <p>​					  local  背景图片相对于元素中的内容固定,</p> <p>​				      fixed：背景相对于视口固定。即使一个元素拥有滚动机制，								 背景也不会随着元素的内容滚动。</p></blockquote> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">body</span><span class="token punctuation">{</span>
	<span class="token property">height</span><span class="token punctuation">:</span> 3000px<span class="token punctuation">;</span>
	<span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>0.jpg<span class="token punctuation">)</span></span><span class="token punctuation">;</span><span class="token comment">/*花纹图片*/</span>
<span class="token punctuation">}</span>
<span class="token selector">.girl</span><span class="token punctuation">{</span>
	<span class="token property">width</span><span class="token punctuation">:</span> 800px<span class="token punctuation">;</span>
	<span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
	<span class="token property">margin-top</span><span class="token punctuation">:</span>600px<span class="token punctuation">;</span>
	<span class="token property">background-color</span><span class="token punctuation">:</span> skyblue<span class="token punctuation">;</span>
	<span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>1.jpg<span class="token punctuation">)</span></span><span class="token punctuation">;</span>
    <span class="token property">background-repeat</span><span class="token punctuation">:</span> no-repeat<span class="token punctuation">;</span>
	<span class="token property">background-attachment</span><span class="token punctuation">:</span> fixed<span class="token punctuation">;</span><span class="token comment">/*让图片贴着视口的左上角排布*/</span>
<span class="token punctuation">}</span>

&lt;div class=<span class="token string">&quot;girl&quot;</span>&gt;&lt;/div&gt;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><h2 id="background简写属性"><a href="#background简写属性" class="header-anchor">#</a> background简写属性</h2> <p>backgroud-color</p> <p>background-image</p> <p>background-repeat</p> <p>backgroun-position</p> <p>background-size</p> <p>background-orgin</p> <p>background-clip</p> <p>background-attachment</p> <p>background背景相关的简写属性，所有背景相关的样式都可以通过改样式设置</p> <p>​					并且该样式没有顺序要求，也没有哪个属性是必须写的</p> <p>注意：</p> <p>​		background-position必须写在background-size前面 ， 并且用/隔开</p> <p>​                                         ----- background-position / background-size</p> <p>​		background-origin   background-clip两个样式   ， orgin要在clip的前面</p> <h2 id="多重背景"><a href="#多重背景" class="header-anchor">#</a> 多重背景</h2> <p>前面我们假设只用一张图片来作为背景,一般来说当然是这样.但CSS3中支持一个元素设置多个背景图片,因此每个背景属性也就有了相应的多值语法,多个值用逗号分隔.</p> <blockquote><p>其中position和size严格按照书写顺序</p> <p>多重背景按声明的先后顺序上下堆叠,</p> <p>最先声明的的在最上面,最后声明的在最下面,背景颜色在所有背景图片的下面.</p></blockquote> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">div</span><span class="token punctuation">{</span>
		<span class="token property">width</span><span class="token punctuation">:</span>600px<span class="token punctuation">;</span>
		<span class="token property">height</span><span class="token punctuation">:</span>600px<span class="token punctuation">;</span>
		<span class="token property">margin</span><span class="token punctuation">:</span>20px auto 0<span class="token punctuation">;</span>
		<span class="token property">background</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>1.jpg<span class="token punctuation">)</span></span> no-repeat top left/200px 200px<span class="token punctuation">,</span>
                     <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>2.jpg<span class="token punctuation">)</span></span> no-repeat bottom right/200px 200px<span class="token punctuation">;</span>
	<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p><strong>复合型的优秀写法</strong></p> <p>center/contain</p> <p>center/cover/更优秀</p> <hr> <h2 id="雪碧图-css-sprite"><a href="#雪碧图-css-sprite" class="header-anchor">#</a> 雪碧图（CSS-sprite）</h2> <p><strong>特点</strong></p> <blockquote><p>整合了页面所有图标的一个图,请求一次将多个图片加载进页面，降低请求次数，加快访问速度，提升用户体验</p></blockquote> <blockquote><p>请求:三次握手,四次挥手.</p></blockquote> <p><strong>服务器发送很多次访问请求,1.造成资源浪费2.导致访问速度变慢。</strong></p> <p><strong>显示雪碧图的条件：</strong></p> <blockquote><p>1.测量图标大小根据测量结果，创建好一个宽和高的容器。</p> <p>2.background-image 引入图片</p> <p>background-position：-xpx -ypx;</p> <p>f12即可进行调试</p></blockquote></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/./guide/notes/css/06-显示样式.html" class="prev">
        04-显示样式
      </a></span> <span class="next"><a href="/./guide/notes/css/08-圆角渐变.html">
        06-圆角渐变
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----><div class="reco-bgm-panel" data-v-b1d3339e><audio id="bgm" src="https://www.ytmp3.cn/down/75475.mp3" data-v-b1d3339e></audio> <div class="reco-float-box" style="bottom:30px;z-index:999999;display:none;" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><img src="https://p1.music.126.net/qTSIZ27qiFvRoKj-P30BiA==/109951165895951287.jpg?param=200y200" data-v-b1d3339e></div> <div class="reco-bgm-box" style="left:10px;bottom:10px;z-index:999999;" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><div class="reco-bgm-cover" style="background-image:url(https://p1.music.126.net/qTSIZ27qiFvRoKj-P30BiA==/109951165895951287.jpg?param=200y200);" data-v-b1d3339e><div class="mini-operation" style="display:none;" data-v-b1d3339e><i class="reco-bgm reco-bgm-pause" style="display:none;" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-play" style="display:none;" data-v-b1d3339e></i></div> <div class="falut-message" style="display:none;" data-v-b1d3339e>
          播放失败
        </div></div> <div class="reco-bgm-info" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><div class="info-box" data-v-b1d3339e><i class="reco-bgm reco-bgm-music music" data-v-b1d3339e></i>花花公子</div> <div class="info-box" data-v-b1d3339e><i class="reco-bgm reco-bgm-artist" data-v-b1d3339e></i>马思唯/step.jad</div> <div class="reco-bgm-progress" data-v-b1d3339e><div class="progress-bar" data-v-b1d3339e><div class="bar" data-v-b1d3339e></div></div></div> <div class="reco-bgm-operation" data-v-b1d3339e><i class="reco-bgm reco-bgm-last last" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-pause pause" style="display:none;" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-play play" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-next next" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-volume1 volume" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-mute mute" style="display:none;" data-v-b1d3339e></i> <div class="volume-bar" data-v-b1d3339e><div class="bar" data-v-b1d3339e></div></div></div></div> <div class="reco-bgm-left-box" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><i class="reco-bgm reco-bgm-left" data-v-b1d3339e></i></div></div></div></div></div>
    <script src="./assets/js/app.7878252f.js" defer></script><script src="./assets/js/2.877879cc.js" defer></script><script src="./assets/js/22.4a1d71dd.js" defer></script>
  </body>
</html>
